<template>
	<view class="order-header">
		<!-- 		<u-navbar title="订单" leftIconColor="#fff" :titleStyle="'color:#fff'" @leftClick="rightClick"
			:bgColor="'#ffffff00'">
		</u-navbar> -->
		<view class="header-bgimg">
			<image class="header-bgimg-img" :src="headerData.shopLogo" mode="widthFix">
			</image>
		</view>

		<view class="order-card order-main">
			<view class="u-flex header-top">
				<view class="header-top-left">
					<view class="order-header-title ">
						{{headerData.shopName}}
					</view>
					<view class="u-flex order-lable m-b-10">
						<view class="lable-text m-r-10">月售{{headerData.monthly}}</view>
						<view class="lable-text">人均{{headerData.average}}元</view>
					</view>
					<view v-if="showActivitiesTime" class="time-text" :class="showActivitiesRule ? 'm-b-10' : ''">活动时间
						{{headerData.startTimeFormat}}-{{headerData.endTimeFormat}}</view>
					<view v-if="showActivitiesRule" class="u-flex order-rule m-b-10">
						<view class="rule-text rule-text-1 m-r-10">
							实付满{{headerData.returnThreshold}}返{{headerData.fullRefund}}</view>
						<!-- <view class="price">满{{item.returnThreshold}}返{{item.fullRefund}}</view> -->
						<view class="rule-text rule-text-2">{{headerData.completeRequireDictText}}</view>
					</view>
				</view>
				<view class="header-top-right">
					<image class="right-img" :src="headerData.shopLogo" mode="aspectFill"></image>
					<view v-if="showActivitiesDistance" class="right-distance">距我{{headerData.distance}}km</view>
				</view>
			</view>

			<view class="header-btm">
				<view class="u-flex btm-text u-flex-items-center m-b-10">
					<view class="btm-text-icon"><u-icon name="map" color="#999999" size="30rpx"></u-icon></view>
					<text>{{headerData.address}}</text>
					<text>{{headerData.shopLocator}}</text>
				</view>
				<u-button v-if="showActivitiesCopyBtn" type="primary" size="small" color="#FF5151" plain text="复制店铺名"
					@tap="shopNameCopy"></u-button>
			</view>
		</view>
	</view>

</template>

<script setup lang="ts">
	const props = defineProps({
		headerData: {
			type: Object,
			default: () => ({
				shopName: '',
				shopLogo: ''
			})
		},
		showActivitiesTime: {
			type: Boolean,
			default: () => (true)
		},
		showActivitiesRule: {
			type: Boolean,
			default: () => (true)
		},
		showActivitiesDistance: {
			type: Boolean,
			default: () => (true)
		},
		showActivitiesCopyBtn: {
			type: Boolean,
			default: () => (true)
		},
	});

	function shopNameCopy() {
		uni.setClipboardData({
			data: props.headerData.shopName,
			// success: function () {
			// 	console.log('success');
			// }
		});
	}

	// navigateBack() {
// },
</script>

<style lang="scss">
	.order-header {
		position: relative;
		z-index: 10;
		padding-bottom: 40rpx;

		.header-bgimg {
			position: absolute;
			z-index: 9;
			width: 100%;
			height: 290rpx;
			overflow: hidden;

			.header-bgimg-img {
				width: 100%;
				// height: var(--status-bar-height);
			}
		}

		.header-bgimg::after {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			content: "";
			background-color: rgba(0, 0, 0, 0.4);
		}

		.order-main {
			position: relative;
			z-index: 10;
			top: 40rpx;
			font-weight: 400;
			font-size: 26rpx;

			.header-top {
				border-bottom: 1px solid #F6F6F6;
				padding-bottom: 10rpx;
				margin-bottom: 20rpx;

				.header-top-left {
					width: 80%;
					height: 170rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.order-lable {
						.lable-text {
							padding: 2rpx 10rpx;
							color: #FF460C;
							font-size: 20rpx;
							border-radius: 10rpx;
							border: 1rpx solid #FF460C;
						}
					}

					.time-text {
						color: #666666;
					}

					.order-rule {

						.rule-text {
							color: #FFFFFF;
							font-weight: 500;
							padding: 5rpx 15rpx;
							border-radius: 4rpx;
						}

						.rule-text-1 {
							background: #FE791B;
						}

						.rule-text-2 {
							background: #FF5046;
						}
					}
				}

				.header-top-right {
					width: 25%;
					text-align: center;

					.right-img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 8rpx;
						border: 1rpx solid #EBEBEB;
					}

					.right-distance {
						font-size: 26rpx;
						color: #666666;
						margin-top: 10rpx;
					}
				}
			}

			.header-btm {
				.btm-text {
					color: #999999;

					// .btm-text-icon {
					// 	// position: absolute;
					// }
				}
			}
		}
	}
</style>